import React from 'react'
import WNavBar from '@components/global/navBar'
import MeModel from '@models/meModel'
import ProductModel from '@models/productModel'
import StudyModel from '@models/studyModel'
import WorkModel from '@models/workModel'
import MeTop from '@components/me/top'
import MeAboutMe from '@components/me/aboutMe'
import MeProduct from '@components/me/product'
import MeSkills from '@components/me/skills'
import MeStudy from '@components/me/study'
import MeWork from '@components/me/work'
import { WhiteSpace } from 'antd-mobile';

interface PopInterface {
  meModel: MeModel
  products: ProductModel[]
  studys: StudyModel[]
  works: WorkModel[]
}

const MePage = (props: PopInterface) => {

  return (
    <WNavBar title="关于我" back={false}>
      <>
        <MeTop meModel={ props.meModel }/>
        <MeAboutMe meModel={ props.meModel }/>
        <WhiteSpace />
        <MeProduct models={ props.products }/>
        <WhiteSpace />
        <MeSkills meModel={ props.meModel }/>
        <WhiteSpace />
        <MeStudy models={ props.studys } show={ props.meModel.experience_show }/>
        <WhiteSpace />
        <MeWork models={ props.works } show={ props.meModel.works_show }/>
      </>
    </WNavBar>
  )
}

MePage.getInitialProps = async () => {
  const data = await Promise.all([
    MeModel.loadData(), 
    ProductModel.loadAllModel(), 
    StudyModel.loadAllModel()
  ])

  return {
    title: '关于我',
    layout: {
      type: 'tabBar',
      tabBar: 'me'
    },
    meModel: data[0],
    products: data[1],
    studys: data[2],
    works: data[0].works
  }
}

export default MePage